<template>
  <div class="container">
    <div class="color-box">
      <div :class="computedClass(index)" v-for="(item,index) in showData" :key="index">
        <div class="color-box-img">
          <i :class="item.icon"></i>
        </div>
        <div class="color-box-content">
          <p class="p1" v-text="item.title"></p>
          <p class="p2" v-text="item.subTitle"></p>
        </div>
      </div>
    </div>
    <div class="content-box">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card shadow="never">
            <div slot="header">
              <span>系统公告</span>
              <el-button style="float: right; padding: 3px 0" type="text">更多>></el-button>
            </div>
            <ul>
              <li v-for="(item,index) in announceData" :key="index" class="text">
                <i :class="item.icon" style="color: red"></i> {{ item.title }} <span style="float: right">{{ item.datetime }}</span>
              </li>
            </ul>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card shadow="never">
            <div slot="header">
              <span>Demo</span>
            </div>
            <ul>
              <li v-for="o in 7" :key="o" class="text">
                Action {{o}} <span style="float: right">2020-06-0{{o}}</span>
              </li>
            </ul>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'dashboard',
    data() {
        return {
          bgColors: ['bgColor-blue', 'bgColor-green', 'bgColor-yellow', 'bgColor-red', 'bgColor-purple', 'bgColor-deepBlue', 'bgColor-deepRed', 'bgColor-grey'],
          showData: [
            {icon:'el-icon-refrigerator', title: 'Data A', subTitle: '1,154,239'},
            {icon:'el-icon-watermelon', title: 'Data B', subTitle: '8,375'},
            {icon:'el-icon-orange', title: 'Data C', subTitle: '234 / s'},
            {icon:'el-icon-potato-strips', title: 'Data D', subTitle: '5,432'},
            {icon:'el-icon-grape', title: 'Data E', subTitle: '18 /￥18.00'},
            {icon:'el-icon-ice-cream-square', title: 'Data F', subTitle: '0 /￥2.00'},
            {icon:'el-icon-apple', title: 'Data G', subTitle: '卸数 1,000'},
            {icon:'el-icon-cherry', title: 'Data H', subTitle: '装数 988'}
          ],
          announceData: [
            {id:"00004", datetime: "2020-06-12", icon: 'el-icon-top', title: "程序员不要偷懒喵！"},
            {id:"00002", datetime: "2020-06-14", icon: '', title: "关于frame-zb 后端框架使用文档"},
            {id:"00003", datetime: "2020-06-13", icon: '', title: "frame-zb 后端框架上线通知"},
            {id:"00005", datetime: "2020-06-11", icon: '', title: "关于vue-zb 前端框架使用文档"},
            {id:"00001", datetime: "2020-06-11", icon: '', title: "vue-zb 前端框架上线通知"},
          ]
        }
    },
    methods: {
      computedClass(index) {
        return 'color-item ' + this.bgColors[index]
      }
    }
  }
</script>
<style>
  .color-box{
    width: 100%;
    margin: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  .color-box .color-item{
    width: 22%;
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
    overflow: hidden;
    border-radius: 10px;
    margin: 10px 5px;
    box-shadow: 10px 10px 10px rgb(250 ,250, 250);
    cursor: pointer;
  }
  .color-box-img{
    display: flex;
    width: 30%;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 80px;
  }
  .color-box-img i{
    font-size: 46px;
  }
  .color-box-content{
    width: 70%;
    height: 80px;
  }
  .color-box-content p{
    margin: 10px 5px;
  }
  .color-box-content .p1{
    margin-top: 18px;
    font-size: 20px;
  }
  .color-box-content .p2{
    font-size: 14px;
    font-weight: bold;
  }
  .content-box{
    width: 90%;
    margin: 10px auto;
  }
  .content-box .el-card{
    min-height: 320px;
  }
  .content-box .text {
    padding: 8px 0px;
    cursor: pointer;
  }
  .content-box .text span{
    color: #AAAAAA;
    font-size: 12px;
    margin: 0px 10px;
  }
</style>

